<!DOCTYPE html>
<html>
<head>
    <title>Angular DEMO 3</title>
    <link type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>

</head>
<body ng-app="app">

<div ng-controller="HelloParentCtrl">


    <div ng-controller="HelloCtrl">
        Say hello to : <input type="text" ng-model="name"/>

        <h1>Hello,{{name}}!</h1>

        <h1>Hello,{{getName()}}!</h1>

        <h1>Hello,{{name}},You are {{age}} old</h1>
    </div>


</div>


<script>
    angular.module('app', [])

            .controller('HelloCtrl', ['$scope', function ($scope) {
                $scope.name = 'World';
                $scope.getName = function () {
                    return $scope.parent.name;
                }
            }])
            .controller('HelloParentCtrl',['$scope',function($scope) {
                $scope.name = '777';
                $scope.age = 10;
            }]);
</script>

</body>
</html>